<template>
  <div class="index">
    <el-card >
      <el-button size="small" @click="addCategory" type="success">新&nbsp;&nbsp;&nbsp;&nbsp;增</el-button>
      <el-tree
        :indent="38"
        :props="props"
        :data="data"
        @node-click="handleNodeClick"
        :render-content="renderContent"
        :default-expand-all="true"
      >
      </el-tree>
    </el-card>
    <CategoryEdit
      :title="categoryEditTitle"
      :dialogFormVisible="dialogFormVisible"
      :data="currentEditCategory"
      :roleList="roleList"
      @val-change="categoryEditChange"
      @cancel="dialogFormVisible = false"
    >
    </CategoryEdit>
  </div>
</template>

<script>
  import TreeDetails from './TreeDetails.vue';
  import CategoryEdit from './CategoryEdit.vue'
  import Message from '../../../components/messages/index'
  export default {
    data() {
      return {
        data:[],
        categoryEditTitle:"",
        dialogFormVisible:false,
        currentEditCategory:null,
        props: {
          children: "children",
          label: 'name',
        },
          resourceList:[],
          roleList:[],
          parentId:0,
          currentUser : JSON.parse(localStorage.getItem("user")),
      };
    },
    methods: {
      handleNodeClick(){

      },
      async categoryEditChange(data){

          if (data.id==null||""===data.id){
              data.parentId = this.parentId;
              this.$http.post("/resource/add",data).then(res=>{
                  if (res.status===200){
                      Message.success("添加资源成功");
                      this.init();
                      this.dialogFormVisible = false;
                  }
              })
          } else {
              this.$http.post("/resource/update",data).then(res=>{
                  if (res.status===200){
                      let bindInfo = {
                          resourceId:data.id,
                          roleList:data.roleIds
                      };
                      this.$http.post("/roleBind/saveBind",bindInfo).then(resp=>{
                          if (resp.status===200){
                              Message.success(resp.data);
                              this.init();
                              this.dialogFormVisible = false;
                          }
                      })
                  }
              })
          }
      },
      deleteCategory(data){
        let self = this;
        self.$confirm('此操作将删除『'+ data.name+'』该菜单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$http.get("/resource/delete/"+data.id).then(res=>{
                if (res.status===200){
                    Message.success(res.data);
                    self.init();
                }
            })
        });

      },
      addCategory(data){
        let self = this;
        self.parentId = data.id;
        self.dialogFormVisible = true;
        self.currentEditCategory = {};
        self.categoryEditTitle = '添加';
      },
      editCategory(data){
        let self = this;
        self.dialogFormVisible = true;
        self.currentEditCategory = data;
        console.log(self.currentEditCategory);
        if (data.type===0){
            self.categoryEditTitle = '修改“'+data.name+'”菜单';
        } else {
            self.categoryEditTitle = '修改“'+data.name+'”按钮';
        }
      },
      renderContent(h, { node }) {
        return this.$createElement(TreeDetails,{props: {data:node},on:{
            'add-category': this.addCategory,
            'edit-category':this.editCategory,
            'delete-category':this.deleteCategory,
          }});
      },

      async init(){
         let user =  JSON.parse(localStorage.getItem("user"));
        this.$http.get("/resource/getMenuByUserId",{params:{"userId":user.id,"typeId":""}}).then(res=>{
            if (res.status===200){
                this.data = res.data;
            }
        })
      },
      getAllRoles(){
          this.$http.get("/role/all").then(res=>{
              if (res.status===200){
                  this.roleList = res.data;
                  console.log(this.roleList)
              }
          })
      }
    },
    mounted: function () {
      this.init();
      this.getAllRoles();
    },
    components: {
      CategoryEdit
    }
  };
</script>
<style lang="less">
  .index{
    width: 100%;
    height: calc(~'100vh - 65px');
  }
  .el-tree-node__content {
    height: 40px;
    line-height: 40px;
  }



</style>


